<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #fff799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }

    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores, ea et, fugiat id incidunt iste laborum
        magnam numquam quam repudiandae sint unde voluptatem, voluptatibus voluptatum! Amet eos et sit.
    </div>
    <div>A accusantium aspernatur consequuntur, dignissimos dolores dolorum eos, esse eum inventore ipsum maxime
        mollitia nemo, nostrum praesentium quam quibusdam quis saepe sequi tempore temporibus unde ut velit voluptatem!
        Expedita, voluptates!
    </div>
    <div>Animi consequatur, dicta eius eum tempora voluptas voluptate. Ab corporis doloremque dolorum ducimus ex id
        maxime, molestias nihil optio quae rerum sequi soluta temporibus. Obcaecati pariatur quae sequi sunt
        voluptatibus.
    </div>
    <div>Nulla quidem sit tempora. A amet aut, et harum nihil quas quisquam repudiandae rerum suscipit ut. Accusantium
        adipisci, alias commodi culpa eligendi, illum inventore, iste officia quidem similique tempora ut?
    </div>
    <div>A beatae blanditiis commodi dolor harum impedit incidunt ipsam, iste, labore numquam recusandae saepe
        voluptatum. Aperiam dicta distinctio doloribus modi quod! Debitis impedit itaque libero non, odio rerum
        similique voluptates!
    </div>
    <div>Adipisci, animi autem cumque delectus dicta ea error facere fuga in libero maiores necessitatibus, nemo
        nesciunt nisi obcaecati odio omnis optio praesentium quaerat quod rem sint tempora ullam velit veritatis!
    </div>
    <div>Adipisci aut blanditiis dicta nostrum? Aut, dolorem ex modi molestias quasi qui unde velit voluptatibus. Ad
        aliquid culpa distinctio fuga harum ipsa ipsum minima pariatur possimus repellat, tempora, tenetur vitae!
    </div>
    <div>Amet atque consequuntur distinctio doloremque expedita illo iste, laudantium, libero magnam possimus quasi quia
        quidem reiciendis. Aut beatae blanditiis eum facere fugit labore laudantium quos rem repellendus sit, veritatis
        vero?
    </div>
    <div>A, aperiam aut corporis culpa cumque dignissimos distinctio eaque et excepturi exercitationem facere hic
        laboriosam laudantium magnam molestias necessitatibus nesciunt officiis pariatur, praesentium quidem ratione
        repellat saepe similique velit voluptatum.
    </div>
    <div>At corporis ducimus, ea explicabo inventore laudantium nemo quas. Accusantium architecto asperiores aut
        consequatur debitis eos, fugit inventore itaque minima mollitia nulla quisquam repudiandae saepe sunt
        voluptatem! Doloribus, nihil, quam.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores, ea et, fugiat id incidunt iste laborum
        magnam numquam quam repudiandae sint unde voluptatem, voluptatibus voluptatum! Amet eos et sit.
    </div>
    <div>A accusantium aspernatur consequuntur, dignissimos dolores dolorum eos, esse eum inventore ipsum maxime
        mollitia nemo, nostrum praesentium quam quibusdam quis saepe sequi tempore temporibus unde ut velit voluptatem!
        Expedita, voluptates!
    </div>
    <div>Animi consequatur, dicta eius eum tempora voluptas voluptate. Ab corporis doloremque dolorum ducimus ex id
        maxime, molestias nihil optio quae rerum sequi soluta temporibus. Obcaecati pariatur quae sequi sunt
        voluptatibus.
    </div>
    <div>Nulla quidem sit tempora. A amet aut, et harum nihil quas quisquam repudiandae rerum suscipit ut. Accusantium
        adipisci, alias commodi culpa eligendi, illum inventore, iste officia quidem similique tempora ut?
    </div>
    <div>A beatae blanditiis commodi dolor harum impedit incidunt ipsam, iste, labore numquam recusandae saepe
        voluptatum. Aperiam dicta distinctio doloribus modi quod! Debitis impedit itaque libero non, odio rerum
        similique voluptates!
    </div>
    <div>Adipisci, animi autem cumque delectus dicta ea error facere fuga in libero maiores necessitatibus, nemo
        nesciunt nisi obcaecati odio omnis optio praesentium quaerat quod rem sint tempora ullam velit veritatis!
    </div>
    <div>Adipisci aut blanditiis dicta nostrum? Aut, dolorem ex modi molestias quasi qui unde velit voluptatibus. Ad
        aliquid culpa distinctio fuga harum ipsa ipsum minima pariatur possimus repellat, tempora, tenetur vitae!
    </div>
    <div>Amet atque consequuntur distinctio doloremque expedita illo iste, laudantium, libero magnam possimus quasi quia
        quidem reiciendis. Aut beatae blanditiis eum facere fugit labore laudantium quos rem repellendus sit, veritatis
        vero?
    </div>
    <div>A, aperiam aut corporis culpa cumque dignissimos distinctio eaque et excepturi exercitationem facere hic
        laboriosam laudantium magnam molestias necessitatibus nesciunt officiis pariatur, praesentium quidem ratione
        repellat saepe similique velit voluptatum.
    </div>
    <div>At corporis ducimus, ea explicabo inventore laudantium nemo quas. Accusantium architecto asperiores aut
        consequatur debitis eos, fugit inventore itaque minima mollitia nulla quisquam repudiandae saepe sunt
        voluptatem! Doloribus, nihil, quam.
    </div>
</div>
</body>
</html>